<template>
  <div class="min-h-screen bg-theme-primary">
    <!-- 导航栏示例 -->
    <ModernNav
      brand-text="现代UI系统"
      :brand-image="brandImage"
      :menu-items="navigationItems"
      variant="default"
      :fixed="false"
      :blur="true"
    >
      <template #actions>
        <ThemeSwitcher />
        <ModernButton variant="primary" size="sm">
          登录
        </ModernButton>
      </template>
    </ModernNav>

    <!-- 主要内容 -->
    <main class="container mx-auto spacing-lg max-w-6xl">
      <!-- 页面标题 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-theme-primary mb-4 font-heading">
          现代简约UI组件系统
        </h1>
        <p class="text-lg text-theme-secondary max-w-2xl mx-auto">
          基于 Tailwind CSS v3.3+ 和 DaisyUI 的现代简约响应式网页组件系统，
          支持亮色/暗色模式切换，提供丰富的交互组件。
        </p>
      </div>

      <!-- 组件展示区域 -->
      <div class="space-y-12">
        <!-- 按钮组件 -->
        <ModernCard title="按钮组件" subtitle="各种样式和尺寸的现代按钮">
          <div class="space-y-6">
            <!-- 按钮变体 -->
            <div>
              <h4 class="text-sm font-medium text-theme-secondary mb-3">按钮变体</h4>
              <div class="flex flex-wrap gap-3">
                <ModernButton variant="primary">Primary</ModernButton>
                <ModernButton variant="secondary">Secondary</ModernButton>
                <ModernButton variant="outline">Outline</ModernButton>
                <ModernButton variant="ghost">Ghost</ModernButton>
                <ModernButton variant="link">Link</ModernButton>
                <ModernButton variant="danger">Danger</ModernButton>
              </div>
            </div>

            <!-- 按钮尺寸 -->
            <div>
              <h4 class="text-sm font-medium text-theme-secondary mb-3">按钮尺寸</h4>
              <div class="flex flex-wrap items-center gap-3">
                <ModernButton size="xs">Extra Small</ModernButton>
                <ModernButton size="sm">Small</ModernButton>
                <ModernButton size="md">Medium</ModernButton>
                <ModernButton size="lg">Large</ModernButton>
                <ModernButton size="xl">Extra Large</ModernButton>
              </div>
            </div>

            <!-- 特殊状态 -->
            <div>
              <h4 class="text-sm font-medium text-theme-secondary mb-3">特殊状态</h4>
              <div class="flex flex-wrap gap-3">
                <ModernButton :loading="true" loading-text="加载中">Loading</ModernButton>
                <ModernButton :disabled="true">Disabled</ModernButton>
                <ModernButton :rounded="true">Rounded</ModernButton>
                <ModernButton :block="true" class="w-full max-w-xs">Block Button</ModernButton>
              </div>
            </div>
          </div>
        </ModernCard>

        <!-- 卡片组件 -->
        <ModernCard title="卡片组件" subtitle="不同样式的现代卡片布局">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <ModernCard 
              title="默认卡片" 
              subtitle="基础样式"
              variant="default"
              size="sm"
            >
              <p class="text-theme-secondary text-sm">
                这是一个默认样式的卡片组件，具有简洁的边框和阴影效果。
              </p>
            </ModernCard>

            <ModernCard 
              title="悬浮卡片" 
              subtitle="增强阴影"
              variant="elevated"
              size="sm"
              :hoverable="true"
            >
              <p class="text-theme-secondary text-sm">
                这是一个悬浮样式的卡片，鼠标悬停时会有提升效果。
              </p>
            </ModernCard>

            <ModernCard 
              title="轮廓卡片" 
              subtitle="简洁边框"
              variant="outlined"
              size="sm"
            >
              <p class="text-theme-secondary text-sm">
                这是一个轮廓样式的卡片，只有边框没有背景色。
              </p>
            </ModernCard>
          </div>
        </ModernCard>

        <!-- 表格组件 -->
        <ModernCard title="表格组件" subtitle="功能丰富的现代数据表格">
          <ModernTable
            :data="tableData"
            :columns="tableColumns"
            :loading="tableLoading"
            :searchable="true"
            search-placeholder="搜索用户..."
            :pagination="true"
            :page-size="5"
            :hoverable="true"
            :mobile-card-view="true"
            empty-text="暂无用户数据"
            @row-click="handleRowClick"
            @sort="handleSort"
            @search="handleSearch"
          >
            <template #cell-status="{ item }">
              <span 
                class="modern-badge"
                :class="{
                  'modern-badge-success': item.status === 'active',
                  'modern-badge-error': item.status === 'inactive',
                  'modern-badge-warning': item.status === 'pending'
                }"
              >
                {{ getStatusText(item.status) }}
              </span>
            </template>

            <template #cell-actions="{ item }">
              <div class="flex space-x-2">
                <ModernButton size="xs" variant="outline">编辑</ModernButton>
                <ModernButton size="xs" variant="danger">删除</ModernButton>
              </div>
            </template>
          </ModernTable>
        </ModernCard>

        <!-- 加载状态 -->
        <ModernCard title="加载组件" subtitle="各种尺寸和颜色的加载动画">
          <div class="space-y-6">
            <div>
              <h4 class="text-sm font-medium text-theme-secondary mb-3">加载尺寸</h4>
              <div class="flex items-center space-x-6">
                <LoadingSpinner size="xs" />
                <LoadingSpinner size="sm" />
                <LoadingSpinner size="md" />
                <LoadingSpinner size="lg" />
                <LoadingSpinner size="xl" />
              </div>
            </div>

            <div>
              <h4 class="text-sm font-medium text-theme-secondary mb-3">加载颜色</h4>
              <div class="flex items-center space-x-6">
                <LoadingSpinner color="primary" />
                <LoadingSpinner color="secondary" />
                <LoadingSpinner color="gray" />
              </div>
            </div>

            <div>
              <h4 class="text-sm font-medium text-theme-secondary mb-3">带文字</h4>
              <LoadingSpinner size="md" :show-text="true" text="正在加载数据..." />
            </div>
          </div>
        </ModernCard>

        <!-- 主题系统 -->
        <ModernCard title="主题系统" subtitle="亮色/暗色模式切换">
          <div class="space-y-4">
            <div class="flex items-center justify-between p-4 bg-theme-secondary rounded-md">
              <div>
                <p class="font-medium text-theme-primary">当前主题</p>
                <p class="text-sm text-theme-secondary">{{ currentTheme }}</p>
              </div>
              <ThemeSwitcher />
            </div>

            <div class="grid grid-cols-2 gap-4">
              <div class="p-4 bg-theme-surface rounded-md border border-theme">
                <h5 class="font-medium text-theme-primary mb-2">主题配色</h5>
                <div class="space-y-2 text-sm">
                  <div class="flex justify-between">
                    <span class="text-theme-secondary">主背景:</span>
                    <span class="text-theme-primary">{{ colors.bg.primary }}</span>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-theme-secondary">次背景:</span>
                    <span class="text-theme-primary">{{ colors.bg.secondary }}</span>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-theme-secondary">主文字:</span>
                    <span class="text-theme-primary">{{ colors.text.primary }}</span>
                  </div>
                </div>
              </div>

              <div class="p-4 bg-theme-surface rounded-md border border-theme">
                <h5 class="font-medium text-theme-primary mb-2">响应式断点</h5>
                <div class="space-y-2 text-sm">
                  <div class="flex justify-between">
                    <span class="text-theme-secondary">当前断点:</span>
                    <span class="text-theme-primary">{{ currentBreakpoint }}</span>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-theme-secondary">窗口宽度:</span>
                    <span class="text-theme-primary">{{ windowWidth }}px</span>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-theme-secondary">设备类型:</span>
                    <span class="text-theme-primary">
                      {{ isMobile ? '移动端' : isTablet ? '平板' : '桌面端' }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ModernCard>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="mt-20 py-8 border-t border-theme bg-theme-secondary">
      <div class="container mx-auto px-4 text-center">
        <p class="text-theme-secondary">
          © 2025 现代UI组件系统 - 基于 Tailwind CSS 和 DaisyUI 构建
        </p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { 
  HomeIcon, 
  UserGroupIcon, 
  CogIcon, 
  DocumentIcon,
  FlagIcon
} from '@heroicons/vue/24/outline'

// 导入组件和组合式函数
import ModernNav from '@/components/ui/ModernNav.vue'
import ModernCard from '@/components/ui/ModernCard.vue'
import ModernButton from '@/components/ui/ModernButton.vue'
import ModernTable from '@/components/ui/ModernTable.vue'
import ThemeSwitcher from '@/components/ui/ThemeSwitcher.vue'
import LoadingSpinner from '@/components/ui/LoadingSpinner.vue'
import { useTheme, useThemeColors, useBreakpoints } from '@/composables/useTheme'

// 主题和响应式
const { currentTheme } = useTheme()
const { colors } = useThemeColors()
const { currentBreakpoint, windowWidth, isMobile, isTablet } = useBreakpoints()

// 品牌图片
const brandImage = 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/CloudClassroom/mkx-default-blue.png'

// 导航菜单
const navigationItems = [
  {
    key: 'home',
    label: '首页',
    to: '/',
    icon: HomeIcon,
  },
  {
    key: 'team',
    label: '团队',
    icon: UserGroupIcon,
    children: [
      {
        key: 'teamfile',
        label: '团队文件',
        to: '/team/files',
        icon: FlagIcon,
      },
      {
        key: 'members',
        label: '成员管理',
        to: '/team/members',
        icon: UserGroupIcon,
      }
    ]
  },
  {
    key: 'docs',
    label: '文档',
    to: '/docs',
    icon: DocumentIcon,
  },
  {
    key: 'settings',
    label: '设置',
    to: '/settings',
    icon: CogIcon,
  }
]

// 表格数据
const tableLoading = ref(false)
const tableData = ref([
  { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员', status: 'active' },
  { id: 2, name: '李四', email: 'lisi@example.com', role: '用户', status: 'active' },
  { id: 3, name: '王五', email: 'wangwu@example.com', role: '用户', status: 'inactive' },
  { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '编辑', status: 'pending' },
  { id: 5, name: '孙七', email: 'sunqi@example.com', role: '用户', status: 'active' },
  { id: 6, name: '周八', email: 'zhouba@example.com', role: '用户', status: 'active' },
  { id: 7, name: '吴九', email: 'wujiu@example.com', role: '管理员', status: 'inactive' },
])

const tableColumns = [
  { key: 'name', label: '姓名', sortable: true },
  { key: 'email', label: '邮箱', sortable: true },
  { key: 'role', label: '角色', sortable: false },
  { key: 'status', label: '状态', sortable: true },
  { key: 'actions', label: '操作', sortable: false },
]

// 状态文本映射
const getStatusText = (status: string) => {
  const statusMap = {
    active: '活跃',
    inactive: '禁用',
    pending: '待审核'
  }
  return statusMap[status] || status
}

// 事件处理
const handleRowClick = (row: any, index: number) => {
  console.log('行点击:', row, index)
}

const handleSort = (column: string, order: 'asc' | 'desc') => {
  console.log('排序:', column, order)
}

const handleSearch = (query: string) => {
  console.log('搜索:', query)
}

// 模拟加载数据
onMounted(() => {
  tableLoading.value = true
  setTimeout(() => {
    tableLoading.value = false
  }, 1000)
})
</script>

<style scoped>
/* 额外的自定义样式 */
.container {
  @apply px-4 sm:px-6 lg:px-8;
}
</style>
